<template>
  <div id="myShopList-max">
    <!-- title -->
    <van-nav-bar
      class="title"
      fixed
      title="我的订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 内容 -->
    <div class="box">
      <ul>
        <li v-for="item in list" :key="item.id" >
          <div  @click="orderDetail(item.branchname,item.orderId)">
            <div class="icon">
              <van-icon name="arrow" size=".18rem" color="white" />
            </div>
            <div>
              <div>
<!--                0未付款1已付款2正在发货3确认收货-->
                <p style="display: inline-block">餐厅:{{ item.branchname }}</p>
                <span style="float: right">
                  <p v-if="item.status==0">未付款</p>
                  <p v-else-if="item.status==1">已付款</p>
                  <p v-else-if="item.status==2">正在配送</p>
                  <p v-else-if="item.status==3">已完成</p>

                  <!--               {{ item.status=='1'?"已付款":"未付款" }}-->
                </span>
              </div>

            </div>

            <div style="float: left;margin-right: 15px">
              <img :src=item.branchUrl />
            </div>

            <div style="margin-left: 10px">
              <p>{{item.describle}}</p>
              <h4>总价: ￥ {{ item.total }}</h4>

              <h3>下单时间: {{ item.placeTime }}</h3>
            </div>

          </div>

          <el-button round v-if="item.status==2" @click="confirmRecepit(item)" style="float: right" >确认收货</el-button>



          <!--          <h3>{{ item.time }}</h3>-->
          <!--          <p>{{ item.vegetable }}</p>-->
          <!--          <h4>{{ item.price }}</h4>-->
          <!--          <p>餐厅:{{ item.restaurant }}</p>-->
        </li>

      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
    };
  },
    created() {
        this.initFindAllOrderByUseid();
        // axios.get("/myShopList.json").then((res) => {
        //   this.list = res.data.data;
        // });
    },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    initFindAllOrderByUseid(){
      //TODO 登录完善后获取登录者的用户id
      var userid = sessionStorage.getItem("userid");
      console.log(userid)
      this.$http.post("/order/order/findOrderByUserid?userid="+userid).then(result=>{
          console.log(11111111111111111)
        console.log(result)
        this.list = result.data.data;
      })
    },
    orderDetail(branchname,orderId){
      sessionStorage.setItem("branchname",branchname)
      sessionStorage.setItem("orderId",orderId)
      this.$router.push({
        name: "orderDeatailed",
        params: {branchname:branchname,orderId:orderId}
      })
    },
      //确认收获
      confirmRecepit(item){
        console.log(item)
        item.status=3
        this.$http.post("/order/order/confirmShipment",item).then(result => {
            console.log(result)
            if (result.data.code==2000){
                this.initFindAllOrderByUseid();
                this.$message.success("收获成功");
            }else {
                this.$message.error("收获失败");
            }
        })
      }
  },

};
</script>

<style lang="less">
  img{
    width: 60px;
    height: 70px;
  }
#myShopList-max {
  .title {
    background-color: #f2473d;
    .van-nav-bar__title,
    .van-nav-bar__text,
    .van-icon-arrow-left {
      color: #fff;
    }
  }
  .box {
    margin: 0.46rem 0;
    padding: 0.2rem 0.1rem;
    background-color: #f9f9f9;
    ul {
      width: 100%;
      li {
        background-color: #f2f2f2;
        padding: 0.15rem;
        margin-bottom: 0.3rem;
        position: relative;
        h3 {
          line-height: 0.3rem;
          font-size: 0.18rem;
          font-weight: 900;
        }
        h4 {
          line-height: 0.25rem;
          font-weight: 700;
          color: red;
        }
        .icon {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #aaaaaa;
          position: absolute;
          top: 0.5rem;
          right: 0.1rem;
          text-align: center;
        }
      }
    }
  }
}
</style>